<template>
<div class="main">
  <div class="block">       
        <div class="qiehuan">
           <el-carousel height="500px">
              <el-carousel-item v-for="item in bannerImg" :key="item.name">
                <nuxt-link :to="item.link">
                  <div class="bannerImg" :style="{'background-image': 'url(' + item.src + ')'}"></div>
                </nuxt-link>
              </el-carousel-item>
            </el-carousel>
        </div>

       <div class="duilian">
<transition
  name="custom-classes-transition"
  enter-active-class="animated fadeInDownBig"
  v-on:after-enter="afterEnter"
>
          <!-- leftCard -->
                  <div v-if="showbanner" class="leftCard cardCentent">
                      <div class="leftCard1">
                          <div>
                            <p><span>{{number1}}</span>年度中国互联网金融行业优秀示范企业</p>
                          </div>
                          <div>
                              <p><span>{{number2}}</span>中国金融行业最具潜力企业</p>
                          </div>
                          <div>
                              <p>{{number1}}&amp;{{number2}}</p>
                              <p>安全联盟信誉企业</p>
                          </div>
                      </div>
                      <div class="leftCard2" @click="showcard = !showcard">
                          <p>新人专享</p>
                          <p>领取现金红包 ></p>
                      </div>
                      <div>
                          <transition name="fade">
                            <div v-if="showcard" class="telmeform">
                                  <div class="inputbox">
                                    <input type="text" v-model="name" placeholder="请输入姓名">
                                    <input type="text" v-model="phone" placeholder="请输入手机号">
                                  </div>
                                  <div @click="subcontact">
                                    提交
                                  </div>
                            </div>
                          </transition>
                      </div>
                </div>
              <!--end leftCard -->
 
 </transition>
  <transition
  name="custom-classes-transition"
  enter-active-class="animated fadeInDownBig">  
          <!-- rightCard -->
           <div v-if="showbanner" class="rightCard cardCentent">
                <div class="rightCard1">
                    <h1>天沁财富·品牌资质</h1>
                   <div class="detail">
                     <div>
                       <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiangzhangxunzhang-copy"></use>
                      </svg>
                     </div>
                      <div> 
                        <h2>挂牌机构</h2>
                        <p>独立基金销售机构</p>
                      </div>
                   </div>
                      

                    <div class="detail">
                     <div>
                       <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anquan-copy"></use>
                      </svg>
                     </div>
                      <div> 
                        <h2>安全银行</h2>
                        <p>安全监管招商银行</p>
                      </div>
                   </div>


                  <div class="detail">
                     <div>
                       <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-weibiaoti16-copy"></use>
                        </svg>
                     </div>
                      <div> 
                        <h2>股东背景</h2>
                        <p>天赋资本&amp;和晰金融倾力打造</p>
                      </div>
                   </div>

                </div>

                <div class="linkbox">
                    <p>
                      <!-- <nuxt-link to="/trust"> -->
                      <a>
                           <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-rongziguanli"></use>
                          </svg>
                          <span>信托资管</span>
                      </a>
                         
                      <!-- </nuxt-link> -->
                      <!-- <nuxt-link to="/equity"> -->
                         <a>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-gupiao"></use>
                            </svg>
                            <span>PE</span>
                         </a>
                      <!-- </nuxt-link> -->
                    </p>
                    <p>
                        <!-- <nuxt-link to="/advisory"> -->
                          <a>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-ai-new"></use>
                            </svg>
                            <span>契约基金</span>
                          </a>
                        
                        <!-- </nuxt-link> -->
                        <!-- <nuxt-link to="/research"> -->
                         <a>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-celvezhihangpeizhi"></use>
                            </svg>
                            <span>海外投资</span>
                         </a>
                        <!-- </nuxt-link> -->
                      </p>                    
                </div>
               
            </div> 
           <!--end  rightCard -->
       </transition>
        </div>

       
  </div>
</div>
</template>
<script>
var timedong ;
var timedong2 ;
import api from '../static/js/api.js';
export default {
    data() {
        return {
          number1:2000,
          number2:2000, 
          name:"",
          phone:"",         
          bannerImg: [
            {
              name: "1",
              src:  "http://p6dwecco6.bkt.clouddn.com/img/4.jpg",
              link:"/product/20"
            },
            {
              name: "2",
              src: "http://p6dwecco6.bkt.clouddn.com/img/5.jpg",
              link:"/product/18"
            },
            {
              name: "3",
              src: "http://p6dwecco6.bkt.clouddn.com/img/3.jpg",
              link:"/column/touzicelue"
            },
            {
              name: "4",
              src:"http://p6dwecco6.bkt.clouddn.com/img/1.jpg",
              link:"/product/33"
            }
          ],
          showcard:false,
          showbanner:false
        }
    },
    methods:{
        afterEnter(){
           timedong = setInterval(this.add,30)
           timedong2 = setInterval(this.add2,30)
        },
        add(){
          this.number1 ++ 
        },
        add2(){
          this.number2 ++ 
        },
        subcontact(){
            if(this.name == ""){
                this.$alert("请填写您的姓名！");
                return;
            }else if(!/^1\d{10}$/.test(this.phone)){
                this.$alert("请正确填写您手机号！");    
                return;                
            }else{
                  api.contactUs({phone:this.phone,name:this.name}).then((res)=>{
                            if(res.code == 1){
                              this.$alert(res.msg)
                              this.showcard = false
                            }else{
                              this.$alert(res.msg)
                            }
                          })
            }
            
            
        }
    },
    watch:{
       number1(oldVal,newVal){
          if(newVal == 2016){
            clearInterval(timedong)
          }
        },
        number2(oldVal,newVal){
          if(newVal == 2017){
            clearInterval(timedong2)
          }
        }
    },
    created:function(){

    },
    mounted:function(){
        this.showbanner = true
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.inputbox{
  width: 170px;
}
.telmeform{
    background: #b41d24;
    opacity: .9;
    height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 286px;
    position: relative;
    top: -120px;
    left: 280px;
}
.telmeform input{
  width: 170px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
 
}
.telmeform input:nth-child(2){
  margin-top: 10px;
}
.telmeform div:nth-child(2){
  height: 70px;
  width: 72px;
  background: white;
  text-align: center;
  line-height: 70px;
  font-size: 14px;
  color: black;
  margin-left: 20px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.linkbox a span{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #333;
}
.linkbox p{
  text-align: center;
  margin-top:10px; 
}
.linkbox .icon{
  color: #333;
  font-size: 30px;
  margin-top: 14px;
      -webkit-animation:rotateplane 3s infinite ease-in-out;
  animation:rotateplane 3s infinite ease-in-out;
}
.linkbox a:hover .icon{
  color:#cd9c54;
}
.linkbox a:hover span{
  color:#cd9c54;
}

.linkbox p a:nth-child(2){
  margin-left: 10px;
}
.linkbox a{
  display: inline-block;
  color: #333;
  background: rgba(255, 255, 255, .9);
  width: 125px;
  height: 80px;
}
.detail h2{
  font-size: 20px;
  color: #333;
  font-weight: normal;
}

.detail p{
  font-size: 14px;
  color: #333;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 6px;
}
.detail div:nth-child(1){
  width: 45px;
}
.detail div:nth-child(2){
  width: 160px;
}
.detail{
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon{
  color: #b41d24;
  font-size: 30px;
  transition: all .5s ease;
}
.rightCard1{
    background: rgba(255, 255, 255, .9);
    height: 300px;
    padding: 20px;
    box-sizing: border-box;
}
.rightCard1 h1{
  color: #cd9c54;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.leftCard1 div{
  height: 120px;
  font-size: 18px;
  border-bottom: 1px solid #cd9c54;
  overflow: hidden;
}
.leftCard1 div p{
  color: #333333;
  width: 190px;
  margin: 30px auto 0;
  text-align: center;
  line-height: 1.3;
}
.leftCard1 div:nth-child(3) p:first-child{
  font-size: 22px;
  color: #cd9c54;
  font-weight: 600;
}
.leftCard1 div:nth-child(3) p:nth-child(2){
   margin: 0 auto;
}
.leftCard1 div span{
  font-size: 22px;
  color: #cd9c54;
  font-weight: 600;
}
.leftCard1{
  height: 360px;
  width: 100%;
  background: rgba(255, 255, 255, .9)
}
.leftCard2{
  background: #b41d24;
  opacity: .9;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
}
.leftCard2 p{
  line-height: 1.4;
}
.leftCard2 p:nth-child(1){
  border-radius: 10px;
  text-align: center;
  width: 130px;
  height: 40px;
  line-height: 40px;
  margin: 20px auto;
  background: white;
  color: #b41d24;
  font-size: 22px;
}
.leftCard2 p:nth-child(2){
  color: white;
  font-size: 16px;
  text-align: center;
}
.duilian{
  width: 1200px;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -600px;
}
.main {
  background: white;
  border-top: 1px solid #d1b775;
}
.block{
  position: relative;
}

.block .cardCentent {
  box-sizing: border-box;
  position: absolute;
  height: 480px;
  width: 280px;
  z-index: 999;
  top: 0px;
  font-size: 22px;
  font-weight: bolder;
}

.block .leftCard {
  left: 0;
}
.block .rightCard {
  right: 0;
  width: 260px;
}
.bannerImg {
  background-repeat: no-repeat;
  background-size: contain contain;
  background-position: center center;
}
.bannerImg {
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform:perspective(220px);
  }
  50% {
    -webkit-transform:perspective(220px) rotateY(180deg);
  }
  100% {
    -webkit-transform:perspective(220px) rotateY(180deg);
  }
}
@keyframes rotateplane {
  0% {
    transform:perspective(120px) rotateY(0);
    -webkit-transform:perspective(220px) rotateY(0);
  }
  50% {
    transform:perspective(120px) rotateY(179.9deg);
    -webkit-transform:perspective(220px) rotateY(179.9deg);
  }
  100% {
    transform:perspective(120px) rotateY(360deg);
    -webkit-transform:perspective(220px) rotateY(360deg);
  }
}

</style>
